<template>
  <div style="padding: 20px">
    <a-row style="text-align: left">
      <a-col :span="24"> <h3 style="font-weight: 600">任务预览</h3> </a-col>
      <a-col :span="24">
        <h5 style="font-weight: 600; margin: 10px 0">基础信息</h5>
      </a-col>
      <a-col :span="12">
        <div style="padding-left: 10px; margin: 2px">
          任务名称:{{ taskModel.taskName }}
        </div>
      </a-col>
      <a-col :span="12">
        <div style="padding-left: 10px; margin: 2px">
          频次:{{ taskModel.frequency == 1 ? "一次性核算" : "周期性核算" }}
        </div>
      </a-col>
      <a-col :span="24">
        <div style="padding-left: 10px; margin: 2px">
          任务描述:{{ taskModel.description }}
        </div>
      </a-col>
      <a-col :span="24">
        <h5 style="font-weight: 600; margin: 10px 0">排放设施</h5>
      </a-col>
      <a-col :span="24">
        <transition-group name="list" class="list-item">
          <!-- fillDataComputed -->
          <div v-for="(item, index) in items" :key="index" style="width: 33%">
            <div v-if="item.type == 'title'" style="text-align: left">
              {{ item.name }}
              <!-- 标题 -->
            </div>
            <div v-if="item.value != ''" class="val_text_con">
              <div class="name">
                <a-icon
                  style="color: rgba(82, 192, 26, 1); marginright: '12px'"
                  type="check"
                />
                <span style="margin-left: 12px">{{ item.facilitiesName }}</span>
              </div>
              <span class="val">{{ item.boundaryName }}</span>
              <span class="val">{{ item.informant }}</span>
            </div>
          </div>
        </transition-group>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  props: ["taskModel", "facilities"],
  mounted() {
    this.facilitiesLen = this.facilities.length;
    this.timer = setInterval(() => {
      if (this.facilitiesIdx >= this.facilitiesLen) {
        clearInterval(this.timer);
        this.timer = null; //清空内存
      } else {
        this.add();
      }
    }, 300);
  },
  data() {
    return {
      facilitiesIdx: 0,
      facilitiesLen: null,
      items: [],
      facilities: [],
      timer: null,
    };
  },
  methods: {
    add() {
      this.items.splice(
        this.items.length,
        0,
        this.facilities[this.facilitiesIdx]
      );
      this.facilitiesIdx++;
    },
  },
};
</script>

<style lang="scss">
// .ant-col {
//   text-align: left;
// }
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.val_text_con {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30px 0 10px;
  margin: 2px;
  font-size: 12px;
}
</style>